<template>
  <van-popup
    :show="IsShowPopup"
    round
    position="bottom"
    :style="{ height: '63%' }"
  >
    <div class="popupTitle">活动通知</div>
    <div class="popupDes">
      恭喜获得20个租币，请查收。为了感谢其长久以来的陪伴，这里的文字请忽略。活动期间每天
      11 点还会上线限量礼包，数量有限先到先得，用户们千万不要错过！
    </div>
    <div class="popupImg">
      <img src="@/assets/XCT.jpg" alt="" />
    </div>
    <div class="secondTitle">小标题</div>
    <div class="secondDes">此外，对于所有有贡献的用户。</div>
    <div class="footerBtn">
      <div class="delete" @click="emit('delete', popupKey)">删除</div>
      <div class="confirm" @click="emit('confirm', popupKey)">确认</div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
// popupKey因为使用了联合类型所以接收也是联合类型
type popupKeyType = number | null
interface PropsType {
  IsShowPopup: boolean
  popupKey: popupKeyType
}

defineProps<PropsType>()

const emit = defineEmits(['delete', 'confirm'])
</script>

<style scoped lang="scss">
.footerBtn {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  .delete {
    width: 115px;
    background: #f2f2f2;
    font-size: 18px;
    color: #bfbfbf;
    line-height: 50px;
    text-align: center;
  }

  .confirm {
    flex: 1;
    background: #00c8be;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    color: #fff;
  }
}

.secondDes {
  color: #999;
  font-size: 14px;
  margin-left: 15px;
  line-height: 19px;
}

.secondTitle {
  margin: 10px 0 5px 15px;
  line-height: 22px;
  font-size: 16px;
  color: #222;
}

.popupImg {
  img {
    margin: 0 15px;
    height: 160px;
    border-radius: 9px;
  }
}

.popupDes {
  margin: 10px 15px;
  color: #999;
  font-size: 14px;
  line-height: 19px;
}

.popupTitle {
  margin-left: 15.5px;
  padding-top: 35px;
  font-size: 18px;
  color: #333;
  line-height: 18px;
}
</style>
